<template>
	<view class="post">
		<image :src="'http://124.93.196.45:10001'+post.coverImgUrl" style="width: 100%; height: 175px;"></image>
		<view class="p1" style="margin-bottom: 10px;">
			<text>{{post.introduce}}</text>
		</view>
		<text style="font-size: 28px;">人才政策区域</text>
		<u-grid>
			<u-grid-item v-for="item in rencai" style="margin-top: 20px; margin-bottom: 20px;" @click="torencai(item.id)">
				<image :src="'http://124.93.196.45:10001'+item.imgUrl" style="width: 60px; height: 60px;"></image>
				<text>{{item.name}}</text>
			</u-grid-item>
		</u-grid>
		<text style="font-size: 28px;">驿站列表</text>
		<view class="p2" v-for="item in list" @click="tonext(item.id)">
			<view class="p3">
				<image :src="'http://124.93.196.45:10001'+item.coverImgUrl"></image>
			</view>
			<view class="p4">
				<text>剩男床位数：{{item.bedsCountBoy}}</text>
				<text>剩女床位数：{{item.bedsCountGirl}}</text>
				<text>地址：{{item.address}}</text>
				<text>介绍：{{item.introduce}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				post:{},
				rencai:[],
				list:[]
			}
		},
		onLoad() {
			this.getpost()
			this.getrencai()
			this.getlist()
		},
		methods: {
			getpost(){
				this.api.get('/prod-api/api/youth-inn/youth-inn/list?pageNum=1&pageSize=1').then(res=>{
					this.post=res.data.rows[0]
				})
			},
			getrencai(){
				this.api.get('/prod-api/api/youth-inn/talent-policy-area/list').then(res=>{
					this.rencai=res.data.data
				})
			},
			getlist(){
				this.api.get('/prod-api/api/youth-inn/youth-inn/list').then(res=>{
					this.list=res.data.rows
					console.log(this.list)
				})
			},
			tonext(id){
				uni.navigateTo({
					url:'/pages/other/post/postdetail/postdetail?id='+id
				})
			},
			torencai(id){
				uni.navigateTo({
					url:'/pages/other/post/rencai/rencai?id='+id
				})
			}
		}
	}
</script>

<style lang="scss">
.p1{
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.p2{
	display: flex;
	margin-top: 20px;
	border-bottom: 1px solid coral;
	.p3{
		width: 50%;
		image{
			width: 150px;
			height: 150px;
		}
	}
	.p4{
		margin-left: 10px;
		display: flex;
		flex-direction: column;
		line-height: 28px;
	}
}
</style>
